@import '../var.less';

.room-list {
  // min-height: 300px;
  width: 100%;
  max-height: calc(100% - 50px);
  z-index: 999;
  overflow: auto;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  .room-item {
    width: calc(50% - 36px);
    height: 0;
    padding-top: calc(50% - 36px);
    margin: 0 12px 24px;
    background-color: #fff;
    overflow: hidden;
    // z-index: 999;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #ddd;
    position: relative;
    &.room-item-btn {
      box-sizing: border-box;
      text-align: center;
      line-height: 32px;
      word-spacing: 8px;
      box-shadow: 0 0 8px 0 @blue;
      background-color: #fff;
      &:active {
        background-color: #efefef;
      }
    }
    &:active {
      box-shadow: 0 0 8px 0 @blue;
    }
    * {
      color: #666;
    }
    .room-item-status {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgb(248, 34, 34);
      &.room-item-status-running {
        background-color: rgb(160, 236, 7);
      }
    }
    .room-item-data {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    .room-item-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 48px;
      }
      p {
        margin-bottom: 0;
      }
    }
  }
}
